import Layout from '@components/layout';
import WorkList from '@components/WorkList';
import HomeApi from '@lib/api/home';
import { ICategory, IWork } from '@lib/types';
import { listAs, listHref } from '@lib/url';
import { Button } from 'antd';
import Link from 'next/link';
import * as React from 'react';
import { connect } from 'react-redux';
import './index.less';

interface IHomeProps {
	category: ICategory[];
	vote: IWork[];
	hot: IWork[];
	update: IWork[];
	create: IWork[];
}

class Home extends React.Component<IHomeProps, {}> {
	static async getInitialProps() {
		const res = await HomeApi();
		if (res instanceof Error) {
			return {};
		} else {
			return res;
		}
	}
	public render() {
		const category = this.props.category.map(it => (<Button key={it.id}><Link href={listHref(it.id, 1, "create")} as={listAs(it.id, 1, "create")}><a>{it.name}</a></Link></Button>))
		return (
			<Layout className="page-index">
				<section className="category">
					<h1>按分类浏览</h1>
					{category}
				</section>
				<section>
					<h1>新作<Link href={listHref("all", 1, "create")} as={listAs("all", 1, "create")}><a className="more">更多</a></Link></h1>
					<WorkList list={this.props.create} grid={{ gutter: 6, column: 1, lg: 3 }} />
				</section>
				<section>
					<h1>热门<Link href={listHref("all", 1, "hot")} as={listAs("all", 1, "hot")}><a className="more">更多</a></Link></h1>
					<WorkList list={this.props.hot} grid={{ gutter: 6, column: 1, lg: 3 }} />
				</section>
				<section>
					<h1>更新<Link href={listHref("all", 1, "time")} as={listAs("all", 1, "time")}><a className="more">更多</a></Link></h1>
					<WorkList list={this.props.update} grid={{ gutter: 6, column: 1, lg: 3 }} />
				</section>
				<section>
					<h1>赞赏<Link href={listHref("all", 1, "vote")} as={listAs("all", 1, "vote")}><a className="more">更多</a></Link></h1>
					<WorkList list={this.props.vote} grid={{ gutter: 6, column: 1, lg: 3 }} />
				</section>
			</Layout>
		);
	}
}

const mapStateToProps = (state: any) => ({
	category: state.category
});

export default connect(mapStateToProps)(Home);